<template>
  <div id="tabber">
    <ul class="tabber-list">
        <li v-for="item in list" :key="item.id">
            <router-link :to="item.path" v-on:click.native="clickTopUp(item.id)" v-bind:class='{actives:item.id==faceValue}'>
                <i class="iconfont" :class="item.icon"></i>
                <p>{{ item.text }}</p>
            </router-link>
        </li>
    </ul>
  </div>
</template>

<script>

export default{
  data () {
    return {
        list: [
            {
                path: '/index/home',
                icon: 'icon-home',
                text: '首页',
                id: 1
            },
            {
                path: '/index/news',
                icon: 'icon-weixin',
                text: '消息',
                id: 2
            },
            {
                path: '/index/communication',
                icon: 'icon-cart-empty',
                text: '通讯录',
                id: 3
            },
            {
                path: '/index/my',
                icon: 'icon-wode-active',
                text: '我的',
                id: 4
            },
        ],
        faceValue: "0",
    }
  },
  methods: {
      clickTopUp(id){
        console.log(id)
        this.faceValue = id;
      }
  }
}
</script>

<style lang="less">

  #tabber{
    background: #fff;
    height:1.2rem;
    .tabber-list{
        display: flex;
        justify-content: center;
        align-items: center;
        justify-items: center;
        &>li{
            flex:1;
            text-align: center;
            a{
                display: inline-block;
                color:#999;
                i{
                    display: inline-block;
                    font-size:0.4rem;
                }
                p{
                    font-size:0.26rem;
                }
                &.router-link-active{
                    color:#FC4A26 
                }
            }
            // .actives{ 
            //     border: 1px solid #1e93ff;
            //     color: #1e93ff;
            // }
        }
        
    }
  }
</style>
